 <ul class="pagination {{size? 'pagination-' + size: ''}}">
    <li>
      <ng-template *ngIf="headTemplate" [ngTemplateOutlet]="headTemplate"
                   [ngTemplateOutletContext]="{ $implicit: this }"></ng-template>
    </li>
    <li *ngIf="boundary" [ngClass]="{disabled: pageIndex == 1}">
      <a [attr.aria-label]="firstLink" (click)="first()">
        <span aria-hidden="true" class="{{firstLinkCssClass}}">{{firstLink}}</span>
      </a>
    </li>
    <li [ngClass]="{disabled: pageIndex == 1}">
      <a (click)="prev()" [attr.aria-label]="preLink">
        <span aria-hidden="true" class="{{preLinkCssClass}}">{{preLink}}</span>
      </a>
    </li>
    <li *ngIf="showPages[0] > 1" (click)="preRange()">
      <a class="ellipsis">...</a>
    </li>
    <li *ngFor="let item of showPages" [ngClass]="{active: item == pageIndex}">
      <a (click)="onPageIndexChange(item)">{{item}}
        <span class="sr-only" *ngIf="item == pageIndex"></span>
      </a>
    </li>
    <li *ngIf="showPages[showPages.length -1] < totalPage" (click)="nextRange()">
      <a class="ellipsis">...</a>
    </li>
    <li [ngClass]="{disabled: pageIndex == totalPage}">
      <a (click)="next()" [attr.aria-label]="nextLink">
        <span aria-hidden="true" class="{{nextLinkCssClass}}">{{nextLink}}</span>
      </a>
    </li>
    <li *ngIf="boundary" [ngClass]="{disabled: pageIndex == totalPage}">
      <a [attr.aria-label]="lastLink" (click)="last()">
        <span aria-hidden="true" class="{{lastLinkCssClass}}">{{lastLink}}</span>
      </a>
    </li>
    <li class="page-item">
      <ng-template *ngIf="tailTemplate" [ngTemplateOutlet]="tailTemplate"
                   [ngTemplateOutletContext]="{ $implicit: this }"></ng-template>
    </li>
  </ul>
